<template>
  <div>
    <h1 align="center">发布新课程</h1>
    <el-steps :active="3" finish-status="success">
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>
    <br />
    <el-row>
      <el-col :span="22" :push="1" class="course">
        <el-col :lg="8" :md="24">
          <el-image
          align="center"
             class="course"
            :src="coursePublish.cover"
            fit="scale-down"
          >
          </el-image>
        </el-col>
        <el-col :lg="12" :push="2">
          <h1 >课程名称:{{ coursePublish.title }}</h1>
          <h2>课程讲师:{{ coursePublish.teacher }}</h2>
          <h2>课程专业:{{ coursePublish.subjectParentTitle }}{{ coursePublish.subjectSonTitle }}</h2>
          <h2>课程课时:{{ coursePublish.lessonNum }}课时</h2>
          <h2>课程价格:￥:{{ coursePublish.price }}元</h2>
        </el-col>
      </el-col>
    </el-row>
    <br/>
     <div align="center">
      <el-button type="primary" @click="page_up">上一步</el-button>
      <el-button type="primary" @click="page_down">最终发布</el-button>
    </div>
  </div>
</template>

<script>
import course from '@/api/edu/course'
export default {
  data() {
    return {
      courseId: null,
      coursePublish: {
        id: null,
        subjectSonTitle: null,
        subjectParentTitle: null,
        title: null,
        teacher: null,
        price: 0,
        lessonNum: 0,
        cover:null,
      },
    };
  },
  methods: {
    //返回基本信息编辑页
    page_up() {
      this.$router.push("/course/chapter/" + this.courseId);
    },
    //保存并下一页
    page_down() {
      
      course.publish_course(this.courseId).then(res=>{
        this.$message.success("保存成功！");
        this.$router.push("/course/table");
      })
    },
    //初始化
    get_course_publish(id){
        course.get_course_publish(id).then(res=>{
          this.coursePublish = res.data.coursePublish
        })
    }
  },
  mounted() {
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id;
      this.courseId = id;
      this.get_course_publish(id)
    }
  },
};
</script>

<style>
.course {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>